<template>
    <el-form :model="data" :rules="mRules" ref="form" label-width="120px">
        <el-card>
            <div slot="header" class="clearfix">
                <span>{{option.title}}</span>
            </div>
            <div>
                <!-- 一级分类  -->
                <template v-if="option.type==='insert_1' || (data.pid=='0'&&option.type==='update')">
                    <el-form-item label="分类名称" prop="name">
                        <el-input v-model="data.name" placeholder="暂无数据" @keyup.enter.native="insert1"/>
                    </el-form-item>
                </template>

                <!-- 二级分类 -->
                <template v-if="option.type==='insert_2' || (data.pid!='0'&&option.type==='update')">
                    <el-form-item label="一级分类" prop="pid">
                        <el-select style="width: 100%" v-model="data.pid" placeholder="请选择一级分类">
                            <el-option
                                    v-for="item in typeList"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="二级分类名称" prop="name">
                        <el-input v-model="data.name" placeholder="二级分类名称" @keyup.enter.native="insert2"/>
                    </el-form-item>
                </template>

                <el-form-item label="排序" prop="sort">
                    <el-input-number v-model="data.sort" :step="1" :min="1" placeholder="100"/>
                </el-form-item>
            </div>
            <div class="mi-card-bottom clearfix">
                <el-button type="text" class="button" @click="close()">取消</el-button>
                <el-button v-if="option.type==='insert_1'" type="text" class="button" @click="insert1()">添加</el-button>
                <el-button v-if="option.type==='insert_2'" type="text" class="button" @click="insert2()">添加</el-button>
                <el-button v-if="option.type==='update'" type="text" class="button" @click="update()">修改</el-button>
            </div>
        </el-card>
    </el-form>
</template>

<script lang="ts">
    import {Component, Emit, Prop} from 'vue-property-decorator'
    import {API} from "@/core/api/API";
    import {ElForm} from "element-ui/types/form";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import {errorMsg, successMsg} from "@/core/utils/message";
    import $http from "@/core/utils/http";
    import {rule} from "@/core/utils/rule";
    import Kit from "@/core/mixin/Kit";
    import {copy} from "@/core/utils/Utils";

    @Component({
        name: 'IndustryTypeEdit',
        components: {},
    })
    export default class IndustryTypeEdit extends mixins(BaseVue, Kit) {
        @Prop({default: {}}) data!: any;
        @Prop({default: {type: 'insert', title: '添加'}}) option!: any;

        //关闭时是否刷新分页
        backRefresh: boolean = false;
        typeList: any = [];

        mRules = {
            id: [rule.notNullBlur()],
            pid: [rule.notNullBlur()],
            name: [rule.notNullBlur()],
            code: [rule.notNullBlur()],
            value: [rule.notNullBlur()],
        };

        //初始化
        async mounted() {
            this.data = copy(this.data);
            this.getType()
        }

        //获取全部一级分类
        getType() {
            $http.post(API.industryTypeList, {pid: 0}).then((res: any) => {
                if (res.success) {
                    this.typeList = res.data;
                }
            });
        }

        //重新获取焦点
        activated() {
        }

        //失去焦点
        deactivated() {
        }

        //添加一级分类
        insert1() {
            (this.$refs.form as ElForm).validate().then(() => {
                this.data.pid = 0;
                $http.post(API.industryTypeInsert, this.data).then((res: any) => {
                    if (res.success) {
                        this.backRefresh = true;
                        successMsg("已添加");
                    }
                });
            },).catch(() => {
                errorMsg("表单内容填写错误，请检查！");
            });
        }

        //添加二级分类
        insert2() {
            (this.$refs.form as ElForm).validate().then(() => {
                $http.post(API.industryTypeInsert, this.data).then((res: any) => {
                    if (res.success) {
                        this.backRefresh = true;
                        successMsg("已添加");
                    }
                });
            },).catch(() => {
                errorMsg("表单内容填写错误，请检查！");
            });
        }

        //修改用户
        update() {
            (this.$refs.form as ElForm).validate().then(() => {
                $http.post(API.industryTypeUpdate, this.data).then((res: any) => {
                    if (res.success) {
                        this.backRefresh = true;
                        successMsg("操作成功");
                    }
                });
            }).catch(() => {
                errorMsg("表单内容填写错误，请检查！");
            });
        }

        //关闭事件
        @Emit("close")
        close() {
            return {refresh: this.backRefresh, index: this.option.index, row: this.data};
        }
    }


</script>

<style scoped lang="scss">

</style>
